$(function(){
	var c=$("#myCanvas").get(0);
	var ctx=c.getContext("2d");
	var width=$('#myCanvas').width();
	var step=40;
	var sR=4;
	var bR=16;
	var qz={};
	var xflag=true;
	var AI=false;
	var audio=$('audio').get(0);
	var audio1=$('audio').get(1);
	var bjmusic=$('.close');
	var tui=$('.tui')
	var kongbai={};
	var hqbiao=[];
	function l(x){
		return (x+0.5)*step+0.5;
	}
	var bg1 = $('.ks');
    var begin = $('.ks .begin');
    var bg2 = $('#box');
//  游戏开始界面
    begin.on('click',function () {
    	$(begin).addClass('ani swing');
        $(this).delay(1000).queue(function(){
        	$(begin).removeClass('ani swing').dequeue()
        })
        bg1.hide();
        bg2.show();
    })
//游戏退出
    tui.on('click',function(){
    	$(tui).addClass('ani swing');
        $(this).delay(1000).queue(function(){
        	$(tui).removeClass('ani swing').dequeue()
        })
		window.location.reload();
	})
	//画棋盘上的圆
	function circle(x,y){
		ctx.save();
		ctx.translate(l(x),l(y));
		ctx.beginPath();
		ctx.arc(0,0,sR,0,Math.PI*2);
		ctx.fill();
		ctx.closePath();
		ctx.restore()
	}
	//画棋盘
	function qipan(){
		ctx.save();
		ctx.beginPath();
		for(var i=0;i<15;i++){
		 ctx.moveTo(l(0),l(i));
		 ctx.lineTo(l(14),l(i));
		 ctx.moveTo(l(i),l(0));
		 ctx.lineTo(l(i),l(14));
		}		
		ctx.stroke();
		ctx.closePath()		
		ctx.restore();
		circle(7,7)
	    circle(3,3)
	    circle(11,3)
	    circle(3,11)
	    circle(11,11)
	    for(var i=0;i<15;i++)
    	{
    		for(var j=0;j<15;j++)
    		{
    			kongbai[m(i,j)]=true;
    		}
    	}
	}
	qipan()
	
	//画棋子
	
	function qizi(x,y,color){
		ctx.save();
		ctx.translate(l(x),l(y));
		ctx.beginPath();
		ctx.arc(0,0,bR,0,Math.PI*2)
		if(color==="black"){
			var d=ctx.createRadialGradient(-4,-4,0,0,0,20);
			ctx.shadowOffsetX=2;
            ctx.shadowOffsetY=2;
            ctx.shadowColor = "black";
            ctx.shadowBlur = 5;
		    d.addColorStop(0.2,"#eee");
		    d.addColorStop(0.5,"black");
		    d.addColorStop(0.5,"black");
		    d.addColorStop(1,"black");
		    ctx.fillStyle=d;
		    audio.play();

		}else if(color==='white'){
			var d=ctx.createRadialGradient(-4,-4,0,0,0,20);
			ctx.shadowOffsetX=2;
            ctx.shadowOffsetY=2;
            ctx.shadowColor = "black";
            ctx.shadowBlur = 5;
		    d.addColorStop(0.3,"#eee");
		    d.addColorStop(0.5,"#fff");
		    d.addColorStop(1,"#fff");
		    d.addColorStop(1,"black");
		    ctx.fillStyle=d;
		    audio.play();

		}
		ctx.fill();
		ctx.closePath();
		ctx.restore();
//		qizi.push({x:x,y:y,color:color})
        qz[m(x,y)]=color;
        delete kongbai[m(x,y)];
	}
	
	
	function you(x,y){
		var flag=false;
		$.each(qizi, function(i,v) {
			if(v.x===x&&v.y===y){
				flag=true;
			}
		});
		return false;
	}
	
	
	function intel(){
	   	var pos={};
		var pos2={};
		var max=-Infinity;
		var max2=-Infinity;
		for(var k in kongbai){
			if(kongbai[k]){
				var x=parseInt(k.split("_")[0]);
				var y=parseInt(k.split("_")[1])
				if(panduan(x,y,"black")>max){
					max=panduan(x,y,"black")
					pos={x:x,y:y}
				}
				if(panduan(x,y,"white")>max2){
					max2=panduan(x,y,"white")
					pos2={x:x,y:y}
				}
			}
		}
		if(max2>=max){
			return pos2;
		}else{
			return  pos;
		}
    }
	//落棋子
	var kaig=true;
	function handclick(e){
		var x=Math.floor(e.offsetX/step);
		var y=Math.floor(e.offsetY/step);
		if(qz[x+'_'+y]){
			return;
		}
		if(AI){
			qizi(x,y,'black');
			
			if(panduan(x,y,'black')>=5){
				$('.blackwin').addClass('ani fade-in-down')
                $('.blackwin').css('display','block')
				$(c).off('click');
				setTimeout(function(){
                    $('.qipu').css('display','block');
                },2000)
                $('.yes').on('click',function(){
                    review();
                    $('.qipu').css('display','none');
                    $('.qipu1').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
                $('.no').on('click',function(){
                    $('.qipu').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
				
			}
			var p=intel()
			qizi(p.x,p.y,'white');
			
			if(panduan(p.x,p.y,'white')>=5){
				$('.whitewin').addClass('ani fade-in-down')
                $('.whitewin').css('display','block')
				$(c).off('click');
				setTimeout(function(){
                    $('.qipub').css('display','block')
                },2000)
                $('.yes').on('click',function(){
                    review();
                    $('.qipub').css('display','none');
                    $('.qipu1').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
                $('.no').on('click',function(){
                    $('.qipub').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
				
			}
			return false;
		}
		if(kaig){
			if(panduan(x,y,'black')>=5){
				$('.blackwin').addClass('ani fade-in-down')
                $('.blackwin').css('display','block')
				$(c).off('click');
				setTimeout(function(){
                    $('.qipu').css('display','block');
                },2000)
                $('.yes').on('click',function(){
                    review();
                    $('.qipu').css('display','none');
                    $('.qipu1').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
                $('.no').on('click',function(){
                    $('.qipu').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
//              return;
			}
			
			qizi(x,y,"black");
			bai=setInterval(miaob,1000)
            sh=0;
            miaoh()
            clearInterval(hei);            
            textb=setInterval(function () {
                secondb++;
                timeb=$('.timeb').text(format(secondb))
                
            },1000)
            clearInterval(texth);
			
			
		}else{
			if(panduan(x,y,'white')>=5){
				$('.whitewin').addClass('ani fade-in-down')
                $('.whitewin').css('display','block')
				$(c).off('click');
				setTimeout(function(){
                    $('.qipub').css('display','block')
                },2000)
                $('.yes').on('click',function(){
                    review();
                    $('.qipub').css('display','none');
                    $('.qipu1').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
                $('.no').on('click',function(){
                    $('.qipub').css('display','none');
                    $('.whitewin').css('display','none');
                    $('.blackwin').css('display','none');
                })
//              return;
			}
			qizi(x,y,"white")
			 hei=setInterval(miaoh,1000)
            sw=0;
            miaob();
            clearInterval(bai);

            texth=setInterval(function () {
                secondh++;
                timeh=$('.timeh').text(format(secondh))
                
            },1000)
            clearInterval(textb);
			};
		kaig=!kaig;
		return false;
	}
	$('#myCanvas').on('click',handclick);
	
	
	
	
	
	//小函数
	function m(a,b){
		return a+"_"+b;
	}
	 //判断输赢
	//横
	function panduan(x,y,color){
		var row=1;
		var i=1;	
		while(qz[m(x+i,y)]===color){			
			row++;
			i++;
		}
		i=1;
		while(qz[m(x-i,y)]===color){			
			row++;
			i++;
		}
		//列
		var lie=1;
		var i=1;	
		while(qz[m(x,y-i)]===color){			
			lie++;
			i++;
		}
		i=1;
		while(qz[m(x,y+i)]===color){			
			lie++;
			i++;
		}
		//左斜
		var zx=1;
		var i=1;	
		while(qz[m(x+i,y+i)]===color){			
			zx++;
			i++;
		}
		i=1;
		while(qz[m(x-i,y-i)]===color){			
			zx++;
			i++;
		}
		//右斜
		var yx=1;
		var i=1;	
		while(qz[m(x+i,y-i)]===color){			
			yx++;
			i++;
		}
		i=1;
		while(qz[m(x-i,y+i)]===color){			
			yx++;
			i++;
		}
		
		
		return Math.max(row,lie,zx,yx);
	}
  
    
    //生成棋谱
    function review(){
    	ctx.save()
    	ctx.font='15px 微软雅黑';
        ctx.textAlign='center';
        ctx.textBaseline='middle';
        var i=1;
        for(var k in qz){
        	var arr=k.split("_");
        	if(qz[k]==="white"){
        		ctx.fillStyle='black'
        	}else{
        		ctx.fillStyle='white'
        	}
        	
        	ctx.fillText(i++,l(parseInt(arr[0])),l(parseInt(arr[1])));
        }
    	
    	ctx.restore();	
//    	棋谱生成图片（收集画布中的所有像素，转化成一张图片，浏览器可用的图片）
        $('.qihe').show().width(500).height(500);
    	$("<img>").attr('src',c.toDataURL()).appendTo(".qihe");
    	$("<a>").attr('href',c.toDataURL()).attr('download','qipu.png').appendTo(".qihe")
    }
    //关闭棋谱
    $('.qihe .guanbi').on('click',function(){
    		$('.qihe').hide();
		  qipan();
		  for(var k in qz){
			var arr=k.split("_");
			qizi(parseInt(arr[0]),parseInt(arr[1]),qz[k])
			$('.qihe img').remove();
		}
    	})
	 function format(second){
        var m=parseInt(second/60);
        var s=parseInt(second%60);
        s=(s < 10)?( '0' + s):s;
        m=(m<10)?('0'+m):m;
        var time=m + ":" + s;
        return time;
    }
    //重新开始
    function restart(){
        //清空画布
        c.width=600;
        c.height=600;
        xflag=true;
        qz={};
        miaob()
        miaoh()
        sh=0;
        sw=0;
               
        $("#myCanvas").on('click',handclick);
        $('.blackwin').css('display','none');
        $('.whitewin').css('display','none');
        $('.qipub').css('display','none');
        $('.qipu').css('display','none');

        secondh=-1;
        secondb=-1;
        qipan();
    }
    
    $('.start').on('click',function(){
        xflag=true;
//      ai=false;
        $('.start').addClass('ani swing');
        $(this).delay(1000).queue(function(){
        	$('.start').removeClass('ani swing').dequeue()
        })
        restart();
    })
  

    //人机模式
    $('.ai').on('click',function(){
        xflag=false;
//      ai=true;
        restart();
        $('.ai').addClass('ani swing');
        $(this).delay(1000).queue(function(){
        	$('.ai').removeClass('ani swing').dequeue()
        })
        $(this).addClass('active')
        $('.two').removeClass('active')
            AI = true;
    })
    //人人模式
    $('.two').addClass('active')
     $('.two').on('click',function(){
        xflag=false;
//      ai=true;
        restart();
        $('.two').addClass('ani swing');
        $(this).delay(1000).queue(function(){
        	$('.two').removeClass('ani swing').dequeue()
        })
            AI = false;
        $(this).addClass('active')
        $('.ai').removeClass('active')
    })
    
    //黑棋先行,刚开始黑棋计时
    var bai;
    var hei;
    hei=setInterval(miaoh,1000);
    texth=setInterval(function () {
        secondh++;
        timeh=$('.timeh').text(format(secondh))
    },1000)


    //白秒表
    var second=$('.clock').get(0);
    var sctx=second.getContext('2d');
    var sw=0;
    function miaob() {
        sctx.clearRect(0,0,100,100)
        sctx.save();
        sctx.translate(50,50);
        sctx.beginPath();
        sctx.rotate(Math.PI*2/60*sw);
        sctx.arc(0,0,3,0,Math.PI*2);
        sctx.moveTo(0,-3)
        sctx.lineTo(0,-30)
        sctx.moveTo(0,3)
        sctx.lineTo(0,8)
        sctx.stroke();
        sctx.closePath();
        sctx.restore();
        sw++;
    }
    miaob()

    var secondb=0;
    var timeb=$('.time')
    var textb;


    //黑秒表
    var secondh=$('.clockh').get(0);
    var hctx=secondh.getContext('2d');
    var sh=0;
    function miaoh() {
        hctx.clearRect(0,0,100,100)
        hctx.save();
        hctx.translate(50,50);
        hctx.beginPath();
        hctx.strokeStyle = '#fff';
        hctx.rotate(Math.PI*2/60*sh);
        hctx.arc(0,0,3,0,Math.PI*2);
        hctx.moveTo(0,-3)
        hctx.lineTo(0,-30)
        hctx.moveTo(0,3)
        hctx.lineTo(0,8)

        hctx.stroke();
        hctx.closePath();
        hctx.restore();
        sh++;
    }
    miaoh()

    var secondh=0
    var timeh=$('.time')
    var texth;
    
    
    
    
    //背景音乐
    bjmusic.on('click',function(){
    	$('.close').addClass('ani swing')
   		if (audio1.paused) {
    		$(this).text("关闭音乐");
    		audio1.play();
    	}else{
    		$(this).text("背景音乐");
    		audio1.pause();
    	}
   	})
    
    //生成棋谱
    $('.huiqi').on('click',function(){
        $('.huiqi').addClass('ani swing');
        $(this).delay(1000).queue(function(){
        	$('.huiqi').removeClass('ani swing').dequeue()
        })
        review()
		$(c).on('click',handclick)
    })
    
    
    
       //和棋
    $('.heqi').on('click',function(){
        $('.heqi').addClass('ani swing')
        $(this).delay(1000).queue(function(){
        	$('.heqi').removeClass('ani swing').dequeue()
        })

        $('.qphe').addClass('ani fade-in-down')
        $('.qphe').css('display','block')

        $('.yes').on('click',function(){
            $('.qipu1').css('display','block');
            $('.qipu1 .yes').on('click',function(){
                review();
                $('.qipu1').css('display','none');
                $('.qphe').css('display','none')
            })
            $('.no').on('click',function(){
                $('.qipu1').css('display','none');
                $('.qphe').css('display','none')
            })
        })
        $('.no').on('click',function(){
            $('.qphe').css('display','none')
        })
       
    })
  





    //认输
    $('.renshu').on('click',function(){
        $('.renshu').addClass('ani swing');
        $(this).delay(1000).queue(function(){
        	$('.renshu').removeClass('ani swing').dequeue()
        })
        $('.qprenshu').addClass('ani fade-in-down')
        $('.qprenshu').css('display','block')

        $('.yes').on('click',function(){
            $('.qipu1').css('display','block');
            $('.qipu1 .yes').on('click',function(){
                review();
                $('.qipu1').css('display','none');
                $('.qprenshu').css('display','none')
            })
            $('.no').on('click',function(){
                $('.qipu1').css('display','none');
                $('.qprenshu').css('display','none')
            })
        })
        $('.no').on('click',function(){
            $('.qprenshu').css('display','none')
        })
    })
     //清除浏览器默认样式
    $(document).on('mousedown',false)
})
